npm<template>
  <div class="page-container">
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div style="display: flex;justify-content: center;">
          <img :src="imgPath" alt="404" :width="350" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <div style="margin: 30px 0 0 50px;width: 350px">
          <div style="font-size: 40px;">404 错误</div>
          <span style="font-size: 20px;color: #606266">
            抱歉，当前访问的页面不存在或无权限访问，请检查输入的URL地址或刷新后重试
          </span>
          <div style="margin-top: 30px;">
            <el-button type="primary" @click="redirectHome()">返回首页</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<style scoped>
  .page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #303133;
  }
</style>
<script>
export default {
  name: '404',
  data () {
    return {
      imgPath: '/static/404.png'
    }
  },
  methods: {
    // 重定向跳转到首页
    redirectHome () {
      let menu = localStorage.getItem('menu')
      if (menu) {
        this.$router.push({path: JSON.parse(menu)[0].link})
      } else {
        this.$router.push({path: '/Login'})
      }
    }
  }
}
</script>
